import { Container, Row, Col, Card } from 'react-bootstrap';
import poster from './assets/images/poster.jpg';
import poster2 from './assets/images/poster-2.jpg';
import poster3 from './assets/images/poster-3.jpg';
import goods1 from './assets/images/goods-1.jpg';
import goods2 from './assets/images/goods-2.jpg';
import goods3 from './assets/images/goods-3.jpg';
import food1 from './assets/images/food-1.jpg'
import food2 from './assets/images/food-2.jpg'
import food3 from './assets/images/food-3.jpg'
import food4 from './assets/images/food-4.jpg'
import food5 from './assets/images/food-5.jpg'
import food6 from './assets/images/food-6.jpg'
import recipe1 from './assets/images/recipe-1.jpg'
import recipe2 from './assets/images/recipe-2.jpg'
import recipe3 from './assets/images/recipe-3.jpg'
import recipe4 from './assets/images/recipe-4.jpg'
import recipe5 from './assets/images/recipe-5.jpg'
import recipe6 from './assets/images/recipe-6.jpg'
import popularRecipe1 from './assets/images/popular-recipe-1.jpg'
import popularRecipe2 from './assets/images/popular-recipe-2.jpg'
import pRecipe1 from './assets/images/p-recipe-1.jpg'
import pRecipe2 from './assets/images/p-recipe-2.jpg'
import pRecipe3 from './assets/images/p-recipe-3.jpg'
import category1 from './assets/images/category-1.jpg'
import category2 from './assets/images/category-2.jpg'
import category3 from './assets/images/category-3.jpg'
import category4 from './assets/images/category-4.jpg'
import category5 from './assets/images/category-5.jpg'
import category6 from './assets/images/category-6.jpg'
import Poster from './components/poster/poster';

import './App.less'
import FirstTitle from "./components/first-title/first-title";
import Introduction from "./components/introduction/introduction";
import SecondTitle from "./components/second-title/second-title";
import GoodsList from "./components/goods-list/goods-list";
import Video from "./components/video/video";
import TwoColGoodsList from "./components/two-col-goods-list/two-col-goods-list";
import TwoDiffGoodsList from "./components/two-diff-goods-list/two-diff-goods-list";
import Category from "./components/category/category";

function App() {
  const firstTitle = [
      "My cookbook, First Generation Recipes From My Taiwanese-American Home is available wherever cookbooks are sold!",
      "Recipes and stories that explore what it means to be Asian American."
  ]
  const secondTitle = [
      " What's cooking this week",
      "Making Taiwanese fried chicken with Cheetos",
      "Latest recipes",
      "Most popular recipes this week",
      "BROWSE BY CATEGORY"
  ]
  const introduction = [
      "Hey there! I'm Frankie. I've always felt somewhere in-between, being culturally American yet not white enough, and too American to never quite fit in to my own Taiwanese roots. I started this website as a place where I could explore my identity through food and share the recipes that define me as a Taiwanese American first gen kid.",

      "You'll find everything from recipes passed down from my family to dishes that blend the cultural lines and make my ancestors pass out (and that's okay!). I just want it to feel like you're eating in my grandma's kitchen and getting the best kind of fat with 10 year old plump me, pork buns stuffed in the face in a suburban midwestern kitchen full of steam and nostalgia."
  ]
  const goodsList = [
    {
      goodsTitle: "Grilled Cheese for a Bad Day with Scallion Mayonnaise",
      goodsImage: goods1,
      goodsDesc: "An indulgent play off the dassic gilled cheese featuring melted gruyere and cheddar alongside apple and sallion mayonnaise oozing between two thick slices of artisan bread."
    },
    {
      goodsTitle: "Grilled Cheese for a Bad Day with Scallion Mayonnaise",
      goodsImage: goods2,
      goodsDesc: "An indulgent play off the dassic gilled cheese featuring melted gruyere and cheddar alongside apple and sallion mayonnaise oozing between two thick slices of artisan bread."
    },
    {
      goodsTitle: "Grilled Cheese for a Bad Day with Scallion Mayonnaise",
      goodsImage: goods3,
      goodsDesc: "An indulgent play off the dassic gilled cheese featuring melted gruyere and cheddar alongside apple and sallion mayonnaise oozing between two thick slices of artisan bread."
    }
  ]
  const goodsList2 = [
    {
      goodsTitle: "Grandma's Pork Dumplings",
      goodsImage: food1,
      goodsDesc: "1 love this lttle dumpling so much. It has been with me since I was a kid. I's meaty, juicy, ginger-y and oh so plump. Steam them, fry them, they all go great in the tum.\n"
    },
    {
      goodsTitle: "Butternut Squash and Pork Dumplings",
      goodsImage: food2,
      goodsDesc: "A pan fried dumpling flled with juicy pork and roasted butternut squash. A recipe/activity full of warm fall smells and comfort."
    },
    {
      goodsTitle: "Chili Crisp Pork and Apple Dumplings",
      goodsImage: food3,
      goodsDesc: "A dumpling to warm your belly in the winter.Juicy pork is marinated with apple and chili crisp for the perfect spicy, sweet, and savory bite."
    },
    {
      goodsTitle: "Pork and Shrimp Dumplings",
      goodsImage: food4,
      goodsDesc: "A nostalgic dumpling that reminds me of my grandma's dumplings, flled with pork, shrimp, carrots and seasoned with homemade mushroom powder."
    },
    {
      goodsTitle: "Butternut Squash and Pork Dumplings",
      goodsImage: food5,
      goodsDesc: "A vegetable forward dumpling featuring bokchoy, shitake mushrooms, and roasted golden beets that's then paired with ground pork."
    },
    {
      goodsTitle: "Chili Crisp Pork and Apple Dumplings",
      goodsImage: food6,
      goodsDesc: "A savory and spicy dumpling flling full of chili crisp. It's spicy, savory, sweet and all the things you want to cat during the winter in a dumpling."
    }
  ]
  const goodsList3 = [
        {
            goodsTitle: "Stir-Fried Rice Cake Bolognese",
            goodsImage: recipe1,
            goodsDesc: "An Asian American dish that pays homage to classic Italian bolognese but with the textures of stir fried rice making a surprsingly delicious chewy appearance."
        },
        {
            goodsTitle: "Grandma's Pearl Meatballs",
            goodsImage: recipe2,
            goodsDesc: "A pan fried dumpling flled with juicy pork and roasted butternut squash. A recipe/activity full of warm fall smells and comfort."
        },
        {
            goodsTitle: "Dan Bing (Taiwanese Breakfast Crepes )",
            goodsImage: recipe3,
            goodsDesc: "A dumpling to warm your belly in the winter.Juicy pork is marinated with apple and chili crisp for the perfect spicy, sweet, and savory bite."
        },
        {
            goodsTitle: "Spaghetti with Creamy Red Bell Pepper Ginger Sauce",
            goodsImage: recipe4,
            goodsDesc: "A nostalgic dumpling that reminds me of my grandma's dumplings, flled with pork, shrimp, carrots and seasoned with homemade mushroom powder."
        },
        {
            goodsTitle: "Creamy Tomato Carrot and Ginger Soup",
            goodsImage: recipe5,
            goodsDesc: "A vegetable forward dumpling featuring bokchoy, shitake mushrooms, and roasted golden beets that's then paired with ground pork."
        },
        {
            goodsTitle: "Grilled Cheese for a Bad Day with Scallion Mayonnaise",
            goodsImage: recipe6,
            goodsDesc: "A savory and spicy dumpling flling full of chili crisp. It's spicy, savory, sweet and all the things you want to cat during the winter in a dumpling."
        }
    ]
  const goodsList4 = [
        {
            goodsTitle: "Dad's Scallion Pancakes",
            goodsImage: popularRecipe1,
            goodsDesc: "An all time classic for any Taiwanese family, these flaky crispy layered pancakes are my obsession. My dad used to make these for me all time the time and they go right from the frying pan into my mouth."
        },
        {
            goodsTitle: "Steamed Pork Buns",
            goodsImage: popularRecipe2,
            goodsDesc: "This steamy, juicy pork bun represents my heritage, my midwest nostalgia in kitchen at grandma's as a kid, and the reason why I love eating and cooking."
        }
    ]
  const goodsList5 = [
        {
            goodsTitle: "0hio Corn Soup",
            goodsImage: pRecipe1,
            goodsDesc: "My dad used to always make me cream of corn soup using canned corn from the supermarket. This is a more refined version that is simple but is packed with sweet and savory corn flavor."
        },
        {
            goodsTitle: "Steamed Egg with Mushrooms and Squash蒸水蛋",
            goodsImage: pRecipe2,
            goodsDesc: "A warm steamed egg with roast fall vegetables that's perfect for cold weather. This a grandma treat that is really savory with a texture that is light and silky.y"
        },
        {
            goodsTitle: "Salt & Pepper Taiwanese Fried Chicken",
            goodsImage: pRecipe3,
            goodsDesc: "Fried chicken only from gua bao recipe. Crunchy, salty, peppery and delicious. An ode to night markets, this chicken's secret sauce (or batter so to speak) is sweet potato starch."
        }
    ]
  const goodsList6 = [
    {
        goodsTitle: "Dumplings & Bao",
        goodsImage: category1,
    },
    {
        goodsTitle: "Bing (餅)",
        goodsImage: category2,
    },
    {
        goodsTitle: "Rice",
        goodsImage: category3,
    },
    {
        goodsTitle: "Noodles",
        goodsImage: category4,
    },
    {
        goodsTitle: "Small Eats",
        goodsImage: category5,
    },
    {
        goodsTitle: "Family Food",
        goodsImage: category6,
    }
  ]
  const video = {
      url: "/video.mp4"
  }
  return (
      <Container>
        <Poster imgSrc={poster} />
        <FirstTitle title={firstTitle[0]}/>
        <Poster imgSrc={poster2} />
        <FirstTitle title={firstTitle[1]}/>
        <Introduction introduction={introduction[0]}/>
        <Introduction introduction={introduction[1]}/>
        <SecondTitle title={secondTitle[0]}/>
        <GoodsList goodsList={goodsList}/>
        <Poster imgSrc={poster3} />
        <SecondTitle title={secondTitle[1]}/>
        <Video src={video.url} />
        <GoodsList goodsList={goodsList2}/>
        <SecondTitle title={secondTitle[2]}/>
        <TwoColGoodsList goodsList={goodsList3}/>
        <SecondTitle title={secondTitle[3]}/>
        <TwoDiffGoodsList goodsList={goodsList4}/>
        <GoodsList goodsList={goodsList5}/>
        <SecondTitle title={secondTitle[4]}/>
        <Category goodsList={goodsList6}/>
      </Container>
  );
}

export default App
